<template>
    <div class="goodsinfo-contianer">

        <!-- 小球动画 -->
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
        >
            <div class="ball" v-show="ballFlag" ref="ball"></div>        
        </transition>

        <!-- 商品轮播图区域 -->
        <div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <swiper :swiperList="swiperList" :isfull="false"></swiper>
					</div>
				</div>
			</div>
        </div>    
        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsInfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：￥<del>{{goodsInfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now">￥{{goodsInfo.sell_price}}</span>
                    </p>
                    <p>购买数量：<numbox @getcount="getSelectedCount" :max="goodsInfo.stock_quantity"></numbox></p>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                </div>
            </div>
        </div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsInfo.goods_no}}</p>
                    <p>库存情况：{{goodsInfo.stock_quantity}}</p>
                    <p>上架时间：{{goodsInfo.add_time}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>        
    </div>
</template>

<script>
import Toast from 'mint-ui'
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
    data(){ // 将 路由参数对象的 ID 过载到 data 中，方便以后调用
        return{
            id: this.$route.params.id,
            swiperList: [// 轮播图数据
                {src: '//m.360buyimg.com/mobilecms/s750x750_jfs/t30184/230/476184793/260944/53cc2bbc/5bf4b25dN3b673c83.jpg!q80.dpg.webp'},
                {src: '//m.360buyimg.com/mobilecms/s843x843_jfs/t26566/130/1777317082/169052/23a35173/5bf4b276N43dbe017.jpg!q70.dpg.webp'},
                {src: '//m.360buyimg.com/mobilecms/s843x843_jfs/t30403/71/150100317/139642/b3ad6bcf/5bf4b277N9ede9770.jpg!q70.dpg.webp'},
                {src: '//m.360buyimg.com/mobilecms/s843x843_jfs/t27640/121/1971732627/42404/394bd8ca/5bf4b277N08512748.jpg!q70.dpg.webp'},
                {src: '//m.360buyimg.com/mobilecms/s843x843_jfs/t30694/48/450873641/53424/12095385/5bf4b277N574ab272.jpg!q70.dpg.webp'},
                {src: '//m.360buyimg.com/mobilecms/s843x843_jfs/t26935/339/2001258817/58623/1dfac72e/5bf4b278N9f230cd2.jpg!q70.dpg.webp'},
                {src: '//m.360buyimg.com/mobilecms/s843x843_jfs/t27568/122/2011591872/144168/7ba5e8de/5bf4b283N5bbda406.jpg!q70.dpg.webp'}
            ] , 
            goodsInfo:{  // 获取到的商品信息
                id: this.$route.params.id,
                title: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                add_time: '2019-1-1 15:34:45',
                goods_no: "SD3973042344",
                sell_price: 1299,
                market_price: 1899,
                stock_quantity: 66 
            } ,
            ballFlag: false,  // 控制小球的隐藏和显示的标志符
            selectedCount: 1 //默认数字框的值为 1
        }
    },
    created(){
        this.getSwiper();
        this.getGoodsInfo();
    },
    methods: {
        getSwiper(){
            // this.$http.get('api/getthumimages/'+this.id).then(result => {
            //     if(result.body.status === 0){ 
                        // result.body.message.forEach(item => [
                        //     item.img = item.src;
                        // ]);
                        // this.swiperList = result.body.message;
            //     }else {
            //         Toast('╮(╯▽╰)╭获取商品轮播图数据失败！！！')
            //     }
            // })
            this.swiperList.forEach(item => {
                item.img = item.src;
            })
            this.swiperList;
        },
        // 获取商品参数区和价格，标题等数据
        getGoodsInfo(){
            // this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
            //     if(result.body.status === 0){
            //         this.goodsInfo = result.body.message[0]
            //     }else {
            //         TOast('╮(╯▽╰)╭获取商品数据失败')
            //     }
            // })
            this.goodsInfo;
        },
        goDesc(id){
            //  点击使用编程式导航跳转到 图文介绍页面
            this.$router.push({ name: 'goodsdesc', params: {id} })
        },
        goComment(id){
            this.$router.push({ name: 'goodscomment', params: {id} })
        },
        addToShopCar(){
            // 添加到购物车
            this.ballFlag = !this.ballFlag;
            // {id：商品ID，count: 购买数量, price：商品价格, selected: false}
            var goodsinfo = {
                id: this.id,
                count: this.selectedCount,
                price: this.goodsInfo.sell_price,
                selected: true
            };
            // 调用 store 中 的 mutations 来将商品加入到购物车中
            this.$store.commit("addToCar",goodsinfo)
        },
        beforeEnter(el){
            el.style.transform = "translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;
            
            
            // 获取小球的 在页面中的位置
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            // 获取 徽标 在页面中的位置
            const badgePosition = document
                .getElementById("badge")
                .getBoundingClientRect();

            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;


            el.style.transform = `translate(${xDist}px, ${yDist}px)`;
            el.style.transition = "all 0.8s cubic-bezier(.27,-0.3,.99,.67)";
            done();
        },
        afterEnter(el){
            this.ballFlag = !this.ballFlag;
        },
        getSelectedCount(count) {
            // 当子组件把 选中的数量传递给父组件的时候，把选中的值保存到 data 上
            this.selectedCount = count;
            console.log("父组件拿到的数量值为： " + this.selectedCount);
        }
    },
    components: {
        swiper,
        numbox
    }

}
</script>

<style lang="scss" scoped>
.goodsinfo-contianer {
    background: #eee;
    overflow: hidden;

    .price{
        .now{
            font-size:  16px;
            font-weight: 700;
            color: red;
        }
    }
    .mui-card-footer{
        display: block;

        .mint-button{
            margin: 15px 0;
        }
    }

    .ball {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 99;
        top: 433px;
        left: 150px;
    }
    
}
</style>
